<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
			<title>我的足迹</title> <%@ include file="/page/wx/include.jsp"%>
			<script type="text/javascript" src="<%=basePath%>/statics/plugins/layer/layer.js"></script>
			<script>
$(function(){
	$('.bjd_list1_con ul li i,.cart_bottom2_con label i').click(function(){
		$(this).toggleClass('current');
		});
	});
</script>
			<style>
.fl_nav1 {
	top: 0
}

.cart_bottom2 {
	bottom: 0;
}

.pp_box {
	top: 0.78rem;
}

.bjd_list1_con ul li {
	position: relative
}
</style>
<script>

/**
 * 查看商品详情
 */
function doProductDetail(productId) {
    window.location.href = '<%=basePath%>/wx/product/detail?productId=' + productId;
}
</script>
</head>
<body style="background: #f5f5f5">
	<c:set var="recordDate" value=""></c:set>
	<c:choose>
		<c:when test="${recordCount == 0 }">
			<div class="noresult">
				<p>
					<i><img src="<%=basePath%>/statics_wx/images/icon_zj.png" /></i> <span>您还没有 浏览过商品哦~</span>
				</p>
			</div>
		</c:when>
		<c:otherwise>
			<div class="headerfixed"></div>
			<div class="fl_nav1" style="top: 0px;">
				<strong>最近浏览${recordCount }个商品</strong> <b> <a href="<%=basePath%>/wx/browseRecord/toProductBrowseRecordEditPage">编辑</a>
				</b>
			</div>
			
			<c:forEach items="${recordList }" var="record" varStatus="i">
				<c:set var="intNum" value="${fn:substringBefore(record.productPrice, '.') }"></c:set>
				<c:set var="smallNum" value="${fn:substringAfter(record.productPrice, '.') }"></c:set>
				<c:if test="${smallNum == '0000' }">
					<c:set var="smallNum" value="00"></c:set>
				</c:if>
				
				<c:choose>
					<c:when test="${record.browseDate eq today }">
						<c:if test="${record.browseDate != recordDate }">
							<c:set var="recordDate" value="${record.browseDate}"></c:set>
							<div class="hd12">
								<h3>今天</h3>
							</div>
						</c:if>
					</c:when>
					<c:when test="${record.browseDate eq recordDate }">
						
					</c:when>
					<c:otherwise>
						<c:set var="recordDate" value="${record.browseDate}"></c:set>
						<div class="hd12">
							<h3>${record.browseDate}</h3>
						</div>
					</c:otherwise>
				</c:choose>
				
				
				<div class="bjd_list1">
					<div class="bjd_list1_con">
						<ul>
							<li>
								<i></i>
								<div class="box4">
									<div class="pic">
										<img src="${imgRootURL }${record.productImg}${ossImgZoomWX}" onerror="this.src='<%=basePath%>/statics/images/default.jpg';"
											onclick="javascript: doProductDetail('${record.productId}');">
									</div>
									<div class="item-info">
										<h2 onclick="javascript: doProductDetail('${record.productId}');">
											<c:choose>
												<c:when test="${fn:length(record.productName) >= 50 }">
                                                    ${fn:substring(record.productName, 0, 50) }...
                                                </c:when>
												<c:otherwise>
                                                    ${record.productName}
                                                </c:otherwise>
											</c:choose>
										</h2>
										<h3 style="z-index: 90; background: white;">
											<strong>¥ <em>${intNum }.</em>${smallNum }
											</strong><b><a href="#" id="btn_add_to_shoppingcart" product_id="${record.productId}"></a></b>
											<input type="hidden" id="product_name" value="${record.productName}">
											<input type="hidden" id="product_image" value="${record.productImg}">
											<input type="hidden" id="product_price_integer" value="${intNum }">
											<input type="hidden" id="product_price_decimal" value="${smallNum }">
										</h3>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</c:forEach>
		</c:otherwise>
	</c:choose>



	<%--添加购物车弹出规格项 --%>
	<div class="overlay" id="goods_editbox" style="display:none;">
		<div class="goods_editbox">
		<a id="btn_close_product_spec" href="javascript:void(0)" class="icon_close"></a>
	    <div class="goods_editbox_con">
	    	<input type="hidden"  id="v_product_id"  value=""/>
 	    	<div class="good_info1">
	        	<div class="pic">
	            	<img id="v_product_image" src="<%=basePath%>/statics_wx/images/index_icon1.png" />
	            </div>
	            <div class="item-info">
	            	<h2 id="v_product_name"></h2>
	                <h3 id="v_product_price"></h3>
	            </div>
	        </div>
	        <div class="good_info2"  id="spec_container">
	           
	        </div>
	        <div class="good_info3">
	        	<strong>数量</strong>
	            <div class="txt1">
	            	<b>
						<a href="javascript:void(0)" id="btn_reduce_buy_num" class="icon_jian_gray"></a>
						<span>
							<input type="text" id="v_buy_num" value="1" >
						</span>
						<a href="javascript:void(0)" id="btn_add_buy_num" class="icon_jia"></a>
					</b>
	            </div>
	        </div>
	    </div>
	    <div class="bottom">
	    	<p>
	        	<input type="button" id="btn_buy_confirm" class="inputbtn1" value="确定" />
	        </p>
	    </div>
	    </div>
	</div>


	<jsp:include page="../../wx_footer.jsp" />
	<script type="text/javascript">
		// 关闭商品规格项筛选弹层
		$("#btn_close_product_spec").click(function(){
			$('#goods_editbox').toggle();
		});
		// 异步查询规格项,弹出规格项
		$("a[id='btn_add_to_shoppingcart']").each(function(){
			$(this).click(function(){
				init_add_to_shoppingcart($(this));
			});
		});
		// 减少购买数量
		$("#btn_reduce_buy_num").click(function(){
			var buy_num = $("#v_buy_num").val();
			if(buy_num != 1){
				$("#v_buy_num").val(parseInt(buy_num)-1);
			}
		});
		// 增加购买数量
		$("#btn_add_buy_num").click(function(){
			var buy_num = $("#v_buy_num").val();
			$("#v_buy_num").val(parseInt(buy_num)+1);
		});
		// 绑定添加购物车事件
		function init_add_to_shoppingcart(this_){
			// 商品名称 价格 从页面上取
			var product_name = this_.closest("h3").find("#product_name").val();
			var product_price_integer =  this_.closest("h3").find("#product_price_integer").val();
			var product_price_deciaml =  this_.closest("h3").find("#product_price_decimal").val();
			var product_image = this_.closest("h3").find("#product_image").val();
			var product_id = this_.attr("product_id");
			
			$("#v_product_image").attr("src",imgRootURL+"/"+product_image);
			$("#v_product_name").text(product_name);
			$("#v_product_price").html("￥<em>"+product_price_integer+"</em><span>."+product_price_deciaml+"</span>");
			$("#v_product_id").val(product_id);
			
			var self = this_;
			// 查询商品规格项
			// 添加购物车
			var url = rootPath + "/wx/product/listProductSpec";
			var params = {
				productId : product_id
			};
			$.ajax({
				type : "post",
				url : url,
				data : params,
				datatype : "json",
				success : function(json) {
					if(json){
						$("#spec_container").html("");
						var has_spec = json.has_spec;
						if(has_spec == "true"){
							// 商品规格 
							var product_spec = json.product_spec;
							for(var i = 0 ; i < product_spec.length; i++){
								var spec = product_spec[i];
								var spec_value_list = spec.productSpecList;
								
								var spec_value_str = "";
								for(var j = 0; j <spec_value_list.length; j++){
									var spec_value = spec_value_list[j];
									spec_value_str += 
										"<li>"+
		                        			"<label spec_id=\""+spec_value.id+"\" spec_price=\""+spec_value.specPrice+"\">"+spec_value.specValue+"</label>"+
			                        	"</li>";
								}
								
								var product_spec_str = ""+ 
										"<div name=\"spec_list\" class=\"hd\">"+
						            		"<h3>"+spec.specName+"</h3>"+
							            "</div>"+
							            "<div class=\"bd\">"+
							            	"<div class=\"good_sxlist\">"+
							                	"<ul>"+
							                		spec_value_str+
							                    "</ul>"+
							                "</div>"+
							            "</div>";
								$("#spec_container").append($(product_spec_str));
								initSpecCheck();
							}
						}
						$('#goods_editbox').toggle();
					}
				},
				error : function() {
					layer.msg('暂时无法查询商品规格项',{time:1000});
				}
			});
		}
		function initSpecCheck(){
			$('.good_sxlist ul li label').click(function(){
				if($(this).hasClass('checked')){
					$(this).addClass('checked');
				}else{
					$(this).addClass('checked');
					$(this).parent().siblings().find('label').removeClass('checked');
				}
			});
		}
		
		initSpecCheck();
		
		// 确认添加到的购物车
		$("#btn_buy_confirm").click(function(){
			// 规格项选择
			var flag = true;
			var spec = [];
			$("div[name='spec_list']").each(function(){
				var spec_name= $(this).find("h3").text();
				var select_li = $(this).next("div.bd").find("label.checked");
				var selected_num = select_li.length;
				if(selected_num == 0){
					layer.msg('请选择'+spec_name,{time:2000});
					flag = false;
				}else{
					select_li.each(function(){
						spec.push({id:$(this).attr("spec_id"),specName:spec_name,specValue:$(this).text()});
					});
				}
			});
			
			if(!flag){
				return false;
			}
			
			// 添加购物车
			var url = rootPath + "/wx/shoppingcart/add";
			var params = {
				productId : $("#v_product_id").val(),
				buyNum : 1,
				addFlag : 1,
				specListJson:JSON.stringify(spec)
			};
			$.ajax({
				type : "post",
				url : url,
				data : params,
				datatype : "json",
				success : function(json) {
					if (json.resultCode == '1') {
						layer.msg('加入购物车成功',{time:1000});
						$('#goods_editbox').toggle();
					}
				},
				error : function() {
					layer.msg('暂时无法加入购物车',{time:1000});
				}
			});
		});
</script>
</body>
</html>